<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel" :footerBtnAlign="align">

    <a-form-item>
      <a-button-group>
        <a-button @click.stop="addFields()">{{$ti18('rxList.newBtn','添加')}}</a-button>
        <a-button @click.stop="removeFields()">{{$ti18('rxList.delBtn','删除')}}</a-button>
      </a-button-group>
    </a-form-item>

    <a-table :dataSource="gridInput" :pagination="false" :rowSelection="rowSelection" rowKey="idx_">
      <a-table-column :title="i18n('queryParam.queryCondition','查询条件')" dataIndex="name">
        <template slot-scope="text, record">
          <a-select style="width: 120px;" v-model="record.name" :options="names" :getPopupContainer="p=>p.parentNode">
          </a-select>
        </template>
      </a-table-column>
      <a-table-column :title="i18n('queryParam.mode','方式')" dataIndex="type">
        <template slot-scope="text, record">
          <a-select style="width: 120px;" v-model="record.type" @change="typeChange(record)" :options="[{value:'fixed',label:$ti18('rxForm.fixedVar','固定值')}]" :getPopupContainer="p=>p.parentNode">
          </a-select>
        </template>
      </a-table-column>
      <a-table-column :title="i18n('queryParam.bindValue','绑定值')" dataIndex="name">
        <template slot-scope="text, record">
            <template v-if="record.type=='fixed'">
                <a-input style="width: 220px;" v-model="record.val" />
            </template>
        </template>
      </a-table-column>
    </a-table>
  </rx-dialog>
</template>

<script>

import { Util, GridMixin,RxDialog } from "@lowcode/jpaas-common-lib";

export default {
    name: "query-param-config",
    components: {
        RxDialog
    },
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function
    },
    mixins: [GridMixin],
    data() {
        return {
            align: "right",
            selectedRowKeys: [],
            buttonSelectedKeys: [],
            gridInput: [],
            names: []
        };
    },
    computed: {
        rowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange
            }
        },
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"listLayoutDialog",key);
        },
        init() {
            var whereField = this.lydata.whereField;
            if (!whereField || whereField.length == 0) return;
            let filterArr = whereField.filter(item => item.valueSource == 'param');
            //自定义SQL查询值
            this.names = filterArr.map(function (item) {
                return {
                    value: item.fieldName,
                    label: item.comment
                }
            })

            this.loadGrid(filterArr);
        },
        loadGrid(whereField) {
            var gridInput = JSON.parse(JSON.stringify(this.lydata.gridInput));
            if (!gridInput || gridInput.length == 0) {
                gridInput = whereField.map(function (item) {
                    return {
                        name: item.fieldName,
                        val: "",
                        type: "fixed",
                        idx_: Util.randomId()
                    }
                })
            }
            this.gridInput = gridInput;
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        onButtonSelectChange(selectedRowKeys) {
            this.buttonSelectedKeys = selectedRowKeys;
        },
        removeFields() {
            this.removeRows(this.gridInput, this.selectedRowKeys);
        },
        addFields() {
            var obj = {
                name: "",
                val: '',
                type:"fixed",
                idx_: Util.randomId()
            };
            this.gridInput.push(obj);
        },
        handleSubmit() {
            Util.closeWindow(this, "ok");
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        typeChange(record) {
            record.val = "";
        }
    }
}
</script>

<style>


.ant-table-wrapper table {
  table-layout: fixed;
}
</style>
